// 获取body
var messagebox = document.createElement("div");
messagebox.setAttribute("class", "message-box");
var body = document.body;
body.appendChild(messagebox);
let messageList = []
let messageLock = false;
function message(val) {
    messageList.push(val);
    messageQueue();
}
// 队列执行
function messageQueue() {
    if (messageLock) return;
    messageLock = true;
    let msg = messageList.shift();
    if (msg) {
        messageShow(msg);
    }
    setTimeout(() => {
        messageLock = false;
        messageQueue();
    }, 500);
}

// 提示框
function messageShow(val) {
    // 定义val的参数
    const { message, type = "success", duration = 3000 } = val;
    // 创建div
    var div = document.createElement("div");
    // 获取要提示的文本
    // 把文本添加进刚创建的div里面
    // body里加上这个样式
    div.setAttribute("class", "message");
    // 如果为成功, 就改成成功的样式
    if (type === "success") {
        div.classList.add("success");
    } else if (type == "error") {
        div.classList.add("error");
    } else if (type == "warning") {
        div.classList.add("warning");
    } else {
        div.classList.add("info");
    }
    var text = document.createTextNode(message);
    div.appendChild(text);
    // 把div添加进messagebox最前面
    messagebox.insertBefore(div, messagebox.firstChild);
    setTimeout(() => {
        div.style.right = "0px";
        div.style.position = "relative";
    },500)
    // 给个定时器, 两秒钟后关闭, 再删除创建的这个div
    setTimeout(() => {
        div.style.position = "absolute";
        div.style.right = -div.style.width - 300 + "px";
        setTimeout(() => {
            messagebox.removeChild(div);
        }, 1000);
    }, duration);
  
}